<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2025-01-08 09:27:05
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2025-01-08 10:55:03
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\components\IdentityModal\index.vue
 * @Description: 选择身份
-->
<script setup lang="ts">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  identityCodeList: {
    type: Array,
  },
  showClose: {
    type: Boolean,
    default: false
  },
  
})
const emits = defineEmits(['close', 'change'])

function handleOk(v) {
  emits('change', v)
}
</script>

<template>
  <el-dialog width="386px" v-model="props.visible" align-center :show-close="props.showClose" modal-class="identity-modal" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="identity-box">
      <h3 class="text-[24px] fw-700 mb-[24px]">选择你的身份</h3>
      <div class="flex-1 overflow-auto">
        <div v-for="code in props.identityCodeList" :key="code?.value" @click="handleOk(code?.value)" class="identity-list">
          <div class="flex items-center">
            <el-image class="w-[35px] h-[44px] mr-[12px]" :src="code.avatar" lazy loading="lazy" fit="cover"></el-image>
            <span class="text-[20px]">
              {{ code?.label }}
            </span>
          </div>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss">
  .identity-modal {
    .el-dialog {
      @apply rounded-[16px];
    }
    .el-dialog__header {
      @apply: border-0;
      .el-dialog__headerbtn{
        @apply: mt-[8px] mr-[8px];
      }
    }
    
    .el-dialog__body {
      @apply p-0;
    }

    .identity-box {
      @apply pb-[32px] px-[32px] fw-700 text-[#1D2129] flex flex-col;
      .identity-list {
        @apply flex items-center justify-between pl-[30px] pr-[12px] py-[11px] mb-[26px] bg-[#F7F8FA] cursor-pointer;
        &:last-child{
          @apply: mb-0;
        }
      }
    }
  }
</style>